<template>
    <div>
        <div style="margin: 10px 0" class="center-flex">

            <!--        <el-button type="warning" @click="reset">重置</el-button>-->

            <el-row>
                <el-col>
                    <el-card>
                        <span>查询会员号</span>
                        <img src="../assets/imgs/xcx.jpg" class="image">
                        <span style="font-size: 12px;color: wheat">（微信扫描使用小程序报名，手机端长按屏幕识别小程序）</span>
                        <div style="padding: 14px;">

                            <el-input style="width: 200px" placeholder="请输入WDSF会员号" suffix-icon="el-icon-search"
                                      v-model="wdsfMin"></el-input>
                            <el-button :disabled="iscClicked" class="ml-5" type="primary" @click="load">搜索</el-button>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Wdsf",
        data() {
            return {
                wdsfMin: "",
                iscClicked:false
            }
        },
        created() {

        },
        methods: {
            load() {
                const data = {
                    "wdsfNumber": this.wdsfMin,
                }
                this.iscClicked = true
                this.request.post("/Wdsf/getInfo", data).then(res => {
                    this.iscClicked = false
                    this.$alert(res.message, '提示', {
                        confirmButtonText: '去报名',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        window.open("https://wdsfwuxicenter.com")
                    })
                })
            },

        }
    }
</script>


<style>
    .center-flex {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        height: 100vh; /* 使div高度为视口高度 */
    }

    .headerBg {
        background: #eee !important;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 80%;
        display: block;
    }

    @media screen and (max-width: 768px) {
        .el-message-box {
            width: 80% !important;
        }
    }
</style>